<template>
  <div class="category_container">
    <div class="left_container">
      <Left v-for="(item,index) in firstLevel" :key="index" :item="item" :selectIndex="selectIndex" :index="index"
        @changeSelectIndex="changeSelectIndex" />
    </div>
    <div class="right_container">
      <div class="right_wrrapper">
        <Right v-for="(item,index) in secondLevel" :key="index" :item="item" />
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  import Left from '../components/class/Left'
  import Right from '../components/class/Right'
  export default {
    components: {
      Left,
      Right
    },
    data() {
      return {
        selectIndex: 0
      }
    },
    methods: {
      changeSelectIndex(index) {
        this.selectIndex = index;
        let tempItem = this.firstLevel[this.selectIndex];
        this.$store.dispatch("CHANGE_SELECH_CATEGORY", tempItem);
      }
    },
    computed: {
      ...mapState({
        category: state => state.Class.category,
        firstLevel: state => state.Class.firstLevel,
        secondLevel: state => state.Class.secondLevel
      })
    },
    mounted() {
      this.$store.dispatch('classList')
    }
  }
</script>

<style lang='scss' scoped>
  .category_container {
    width: 100%;
    height: 100vh;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  .left_container {
    height: 100%;
    width: 25%;
  }

  .right_container {
    height: 100%;
    width: 73%;
    overflow: scroll;
  }

  .right_wrrapper {
    width: 100%;
    display: inline-flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
  }
</style>